<template>
    <div :id="domID" v-show="!isDisposed" style="width: 100%; height: 100%;"></div>
</template>

<script>
    export default {
        props: {
            domID: {
                type: String,
                default: 'charts-dom'
            },
            chartsData: {
                type: Array,
            },
            //判断value是否需要*100
            isMultiply100: {
                type: Boolean,
                default: true
            },
            seriesName: {
                type: String,
            },
            //判断图表实例是否销毁
            isDisposed: {
                type: Boolean,
                default: false
            },
            //判断图表是否loading
            isLoading: {
                type: Boolean,
                default: false
            },

        },
        data() {
            return {
                myEcharts: '',

            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //图表配置
            LargeScaleArea_charts(){
                this.myEcharts.hideLoading();
                this.$emit('chartsIsLoading', false);

                //提取出value有值的数据，为''或0的剔除掉
                let dateList = [];
                let valueList = [];
                this.chartsData.forEach((item) => {
                    if (item.value && item.value != 0.00 && item.value != "NA") {
                        dateList.push(item.time);
                        //判断value是否需要*100
                        if (this.isMultiply100) {
                            valueList.push(this.$accounting.formatMoney(item.value * 100, "", 2));
                        } else {
                            valueList.push(this.$accounting.formatMoney(item.value, "", 2));
                        }
                    }
                });

                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                    },
                    // 控制图表摆放位置
                    grid: {
                        // left: '10%',
                        bottom: '28%',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,//坐标轴两边留白策略
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            rotate: '45',
                            fontSize: 12
                        },
                        //坐标轴轴线相关设置
                        axisLine: {
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: '{value}%'
                        },
                        //坐标轴轴线相关设置
                        axisLine: {
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick: {
                            show: false,
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            show: true,
                            start: 0,
                            end: 100,
                        }
                    ],
                    series: [{
                        name: this.seriesName,
                        type: 'line',
                        data: valueList,

                        sampling: 'average',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(130, 223, 194, 0.2)'
                            }, {
                                offset: 1,
                                color: 'rgba(130, 223, 194, 1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        },
                        itemStyle: {
                            color: 'rgb(130, 223, 194)',
                            borderColor: 'rgba(130, 223, 194, 0.2)',
                            borderWidth: 12
                        },

                        // smooth: true,
                        // showSymbol: false,
                        // lineStyle: {
                        //     width: 2
                        // },
                        // areaStyle: {
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        //         offset: 0,
                        //         color: '#f6fdfb'
                        //     }, {
                        //         offset: 0.8,
                        //         color: '#ddf7ef'
                        //     }], false),
                        //     shadowColor: 'rgba(0, 0, 0, 0.1)',
                        //     shadowBlur: 10
                        // },
                        // itemStyle: {
                        //     color: 'rgb(130, 223, 194)',
                        //     borderColor: 'rgba(130, 223, 194, 0.2)',
                        //     borderWidth: 12
                        // },
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                                {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                            ],
                            label: {
                                formatter: (param) => {
                                    return this.$accounting.formatMoney(param.value, "", 2) + '%';
                                }
                            }
                        },
                    }],
                    color: ['#82dfc2']
                });
            },
        },
        watch: {
            'chartsData':{
                handler: function(chartsData){
                    if(chartsData.length > 0 && !this.isDisposed){
                        // console.log(chartsData, this.isDisposed)

                        this.$nextTick(() => {
                            this.myEcharts = echarts.getInstanceByDom(document.getElementById(this.domID));
                            if (this.myEcharts === undefined) {
                                this.myEcharts = echarts.init(document.getElementById(this.domID));
                            }
                            this.myEcharts.showLoading();
                            this.LargeScaleArea_charts();
                            window.addEventListener('resize', () => {
                                this.myEcharts.resize();
                            });
                        })
                    }
                },
                deep: true
            },
            //是否销毁图表实例
            isDisposed(value) {
                if(value){
                    if(this.myEcharts){
                        this.myEcharts.dispose();
                    }
                    // console.log(this.myEcharts.isDisposed())
                }
            },
            //判断图表是否loading
            isLoading(value) {
                if(value){
                    if(this.myEcharts){
                        this.myEcharts.showLoading();
                    }
                }
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
